<template>
  <div class="rotation-chart">
    <div v-if="mode === 'DESIGN'">
      <el-carousel height="150px" :autoplay="autoplay" :interval="interval" trigger="click" arrow="always">
        <el-carousel-item v-for="(item,index) in list" :key="index">
          <img class="carousel-image" :src="item.url" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div v-else>
      <template v-if="!readerMode">
        <el-select class="max-fill" v-if="!expanding" v-model="_value" size="medium" clearable :placeholder="placeholder">
          <el-option v-for="(op, index) in options" :key="index" :value="op" :label="op"></el-option>
        </el-select>
        <el-radio-group v-model="_value" v-else>
          <el-radio v-for="(op, index) in options" :key="index" :label="op">{{op}}</el-radio>
        </el-radio-group>
      </template>
      <template v-else>
        <div v-text="_value"></div>
      </template>
    </div>
  </div>
</template>

<script>
import componentMinxins from '../form-config/component-minxins.js'

export default {
  mixins: [componentMinxins],
  name: "RotationChart",
  components: {},
  props:{
    // 是否自动播放
    autoplay:{
      type: Boolean,
      default: true
    },
    // 轮播间隔
    interval:{
      type: Number,
      default: 3000
    },
    // 轮播图集合
    list:{
      type: Array,
      default: ()=>{
        return [];
      }
    },
    // 读者模式
    readerMode: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style  scoped>
.carousel-image{
  width: 100%;
}
/deep/.rotation-chart .el-carousel__indicators {
    left: unset;
    transform: unset;
    right: 2%;
}
/deep/.rotation-chart .el-carousel__button {
    width: 10px;
    height: 10px;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
}
/deep/.rotation-chart .is-active .el-carousel__button {
    background: #3f8ec8;
}

/deep/.rotation-chart .el-carousel__container {
    height: 100%;
}

</style>